<script setup lang="ts">
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
import { genFileId } from 'element-plus';
import useStore from '@/store';
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus';
const { infoCollect } = useStore();
const { form } = storeToRefs(infoCollect);
const { submitCollection } = infoCollect;
const upload = ref<UploadInstance>()

const handleExceed: UploadProps['onExceed'] = (files) => {
	upload.value!.clearFiles()
	const file = files[0] as UploadRawFile
	file.uid = genFileId()
	upload.value!.handleStart(file)
}

const submitUpload = () => {
	upload.value!.submit();
}

const handleSuccess = (res: any) => {
	form.value.infoContent = res.data;
	submitCollection();
}

defineExpose({
	submitUpload,
});
</script>

<template>
	<el-upload :on-success="handleSuccess" ref="upload" class="upload-demo" action="http://localhost:8080/release" :limit="1"
		:on-exceed="handleExceed" :auto-upload="false">
		<template #trigger>
			<el-button type="primary">请选择文件</el-button>
		</template>
		<template #tip>
			<div class="el-upload__tip text-red">
				一次只可上传一个文件，后一个文件将覆盖前一个。
			</div>
		</template>
	</el-upload>
</template>

<style lang="scss" scoped>
</style>